<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 11:33:36
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 09:27:24
-->
<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null" @cancel="handleClose">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formState"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="示例图名称"
            name="label"
            :rules="{ required: true, message: '请输入示例图名称' }"
          >
            <a-input
              v-model:value="formState.label"
              placeholder="输入示例图名称"
            />
          </a-form-item>
          <a-form-item
            label="上传示例图"
            name="exampleImg"
            ref="exampleImgRef"
            :rules="{ required: true, message: '请上传示例图' }"
          >
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formState.exampleImg"
                  :src="formState.exampleImg"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.png格式</div>
            </div>
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirm"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { nextTick, ref, toRaw } from "vue";
import { singleUploadsFile } from "@/api/upload";
const props = defineProps(['titles','index','list'])
const modalOpen = ref(true);
const formRef = ref(null);
const formState = ref({});
const changeIndex = ref("");
changeIndex.value = props.index;
formState.value = Object.assign({}, props.list);
const title = ref("");
title.value = props.titles
// const open = (titles, record, index) => {
//   title.value = titles;
//   changeIndex.value = index;
//   modalOpen.value = true;
//   nextTick(() => {
//     formState.value = Object.assign({}, record);
//     formRef.value.resetFields();
//   });
// };
const loading = ref(false);
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const exampleImgRef = ref(null);
const handleChange = (file) => {
  loading.value = true;
  let formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "1");
  singleUploadsFile(formData).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      formState.value.exampleImg = res.data;
      exampleImgRef.value.clearValidate();
    }
  });
};
const emits = defineEmits(["refresh","closeModal"]);
const handleSubmit = async (res) => {
  formRef.value.validate().then((res) => {
    emits("refresh", toRaw(formState.value), changeIndex.value);
  });
};
function handleClose() {
  emits("closeModal");
}
const confirm = () => {
  formState.value = {};
};
// defineExpose({ open });
</script>
<style lang="scss" scoped></style>
